<!-- 购物车 -->
<template>
	<view class="page_box">
		<view class="head_box" v-if="cartList.length">
			<view class="tool-box x-bc mb20">
				<view class="count-box x-f">
					<text class="iconfont icon-location mr10"></text>
					{{ storeInfo.name || '暂无自提点' }}
				</view>
				<button class="cu-btn set-btn" @tap="onSet">{{ isTool ? '完成' : '编辑' }}</button>
			</view>
		</view>
		<view class="content_box">
			<checkbox-group class="block" v-if="cartList.length">
				<view class="collect-list x-start" v-for="(g, index) in cartList" :key="g.id">
					<view class="x-c" style="height: 200rpx;" @tap="onSel(index, g.checked)">
						<checkbox :checked="g.checked" :class="{ checked: g.checked }" class="goods-radio round orange">
						</checkbox>
					</view>
					<view class="goods-wrap">
						<view class="lose-box"
							v-if="g.cart_type === 'invalid' || (g.cart_type === 'activity' && !isActivityPay)">
							<text v-if="g.cart_type === 'invalid'" class="iconfont icon-yishixiao"></text>
							<view v-if="g.cart_type === 'activity' && !isActivityPay" class="invalid-tips x-c">
								活动商品,仅支持单独购买</view>
						</view>
						<t-mini-card :is_next_day_delivery="g.goods.is_next_day_delivery" :type="g.activity_type"
							:describe="g.sku_price.goods_sku_text" :price="g.sku_price.price"
							:image="g.sku_price.image ? g.sku_price.image : g.goods.image"
							@click="$Router.push({ path: '/pages/goods/detail/index', query: { id: g.goods_id } })">
							<!-- 自定义标题：带“次日达”标签 -->
							<template #title>
								<!-- <text v-if="g.goods.is_next_day_delivery == 1" style="color: #f5a623;">[次日达] </text> -->
								<text>{{ g.goods.title }}</text>
							</template>

							<template #cardBottom>
								<view class="x-bc price-box">
									<view class="price">{{ g.sku_price.price }}</view>
									<view class="num-step">
										<uni-number-box :disabled="isChange" :goodsInfo="g.goods"
											@change="onChangeNum($event, g, index)" :currentSkuPrice="g.sku_price"
											:value="g.goods_num" :step="1" :min="0"></uni-number-box>
									</view>
								</view>
							</template>
						</t-mini-card>
					</view>
				</view>
			</checkbox-group>
			<view class="empty-box x-c" v-else><t-empty :emptyData="emptyData"></t-empty></view>
		</view>
		<view class="foot_box " v-if="cartList.length">
			<view class="tools-box x-bc">
				<label class="check-all x-f" @tap="onAllSel">
					<radio :checked="allSel" :class="{ checked: allSel }" class="check-all-radio orange"></radio>
					<text>全选</text>
					<text>（{{ totalCount.totalNum }}）</text>
				</label>
				<view class="x-f">
					<view class="price" v-if="!isTool">{{ totalCount.totalPrice.toFixed(2) }}</view>
					<button class="cu-btn pay-btn" :disabled="!isSel" v-show="!isTool" @tap="onPay">立即购买</button>
					<button class="cu-btn del-btn" v-show="isTool" @tap="goodsDelete">删除</button>
				</view>
			</view>
		</view>
		<!-- 登录提示 -->
		<t-login-modal></t-login-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	let timer = null;
	export default {
		components: {},
		data() {
			return {
				isTool: false,
				isChange: false,
				emptyData: {
					img: this.$IMG_URL + '/emptyCart.png',
					tip: '购物车空空如也,快去逛逛吧~'
				}
			};
		},
		computed: {
			...mapState({
				cartList: ({
					cart
				}) => cart.cartList,
				allSel: ({
					cart
				}) => cart.allSelected,
				storeInfo: ({
					user
				}) => user.storeInfo
			}),
			...mapGetters(['totalCount', 'isSel', 'isActivityPay'])
		},
		onLoad() {},
		onShow() {
			this.getCartList();
		},
		methods: {
			...mapActions(['getCartList', 'changeCartList']),
			// 更改商品数
			async onChangeNum(e, g, index) {
				if (g.goods_num !== e) {
					uni.showLoading({
						mask: true
					});
					this.isChange = true;
					if (e <= 0) {
						await this.changeCartList({
							ids: [g.id],
							goodsNum: e,
							art: 'delete'
						});
					} else {
						await this.changeCartList({
							ids: [g.id],
							goodsNum: e,
							art: 'change'
						});
					}
					this.isChange = false;
					await uni.hideLoading();
				}
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 单选
			onSel(index, flag) {
				let that = this;
				that.$store.commit('selectItem', {
					index,
					flag
				});
			},
			// 功能切换
			onSet() {
				this.isTool = !this.isTool;
			},
			// 全选
			onAllSel() {
				let that = this;
				that.$store.commit('changeAllSellect'); //按钮切换全选。
				that.$store.commit('getAllSellectCartList', that.allSel); //列表全选
			},
			// 结算
			onPay() {
				let that = this;
				let {
					cartList
				} = this;
				if (this.isSel) {
					let confirmcartList = [];
					this.cartList.forEach(item => {
						if (item.checked) {
							confirmcartList.push({
								goods_id: item.goods_id,
								goods_num: item.goods_num,
								sku_price_id: item.sku_price_id,
								goods_price: item.sku_price.price
							});
						}
					});
					that.jump('/pages/order/confirm', {
						goodsList: confirmcartList,
						from: 'cart'
					});
				}
			},
			// 删除
			async goodsDelete() {
				let that = this;
				let {
					cartList
				} = this;
				let selectedIdsArray = [];
				cartList.map(item => {
					if (item.checked) {
						selectedIdsArray.push(item.id);
					}
				});
				await this.changeCartList({
					ids: selectedIdsArray,
					art: 'delete'
				});
				if (cartList.length === selectedIdsArray.length) {
					this.isTool = false;
				}
			}
		}
	};
</script>

<style lang="scss">
	.head_box {
		.safety-box {
			height: 80rpx;
			font-size: 24rpx;
			padding: 0 30rpx;
			background: #f7f5f6;

			.cuIcon-safe {
				font-size: 32rpx;
				margin-right: 16rpx;
			}
		}

		.tip-box {
			font-size: 26rpx;
			color: #999;
			height: 90rpx;
			padding: 0 30rpx;
			background: #fff;

			.tag {
				border: 1rpx solid rgba(168, 112, 13, 1);
				border-radius: 2rpx;
				padding: 0 10rpx;
				line-height: 40rpx;
				font-size: 26rpx;
				color: #a8700d;
				margin-right: 20rpx;
			}
		}

		.tool-box {
			height: 90rpx;
			padding: 0 30rpx;
			background: #fff;

			.count-box {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.set-btn {
				background: none;
				font-size: 26rpx;
				color: #999999;
			}
		}
	}

	// 空白页
	.empty-box {
		flex: 1;
		width: 100%;
		height: 100%;
	}

	.collect-list {
		padding: 30rpx 20rpx;
		background: #fff;
		margin-bottom: 20rpx;

		/deep/ .goods-title {
			width: 420rpx !important;
		}

		// 商品卡片包裹
		.goods-wrap {
			position: relative;

			.lose-box {
				position: absolute;
				z-index: 10;
				width: 100%;
				height: 100%;
				background-color: rgba(#fff, 0.8);

				.icon-yishixiao {
					position: absolute;
					bottom: 0rpx;
					right: 80rpx;
					font-size: 140rpx;
					line-height: 140rpx;
					color: #dbdbdb;
					transform: rotate(-30deg);
				}

				.invalid-tips {
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					bottom: 0;
					margin: auto;
					width: 400rpx;
					height: 60rpx;
					border-radius: 30rpx;
					color: #fff;
					background-color: rgba(#000, 0.35);
				}
			}
		}

		.goods-radio {
			transform: scale(0.7);
			margin-right: 20rpx;
			// background:  #E9B564;
		}

		.price-box {
			width: 420rpx;

			.price {
				color: $t-mainColor;
				font-weight: 600;

				&::before {
					content: '￥';
					font-size: 24rpx;
				}
			}
		}
	}

	.tools-box {
		height: 100rpx;
		width: 750rpx;
		padding: 0 20rpx;
		background: #fff;

		.check-all {
			font-size: 26rpx;

			.check-all-radio {
				transform: scale(0.7);
			}
		}

		.price {
			color: $t-mainColor;
			font-size: 500;
			margin-right: 30rpx;
			font-weight: 600;

			&::before {
				content: '￥';
				font-size: 24rpx;
			}
		}

		.pay-btn {
			width: 200rpx;
			height: 70rpx;
			background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
			border-radius: 35rpx;
			border-radius: 35rpx;
			padding: 0;
			color: rgba(#fff, 0.9);
		}

		.del-btn {
			width: 200rpx;
			height: 70rpx;
			background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
			border-radius: 35rpx;
			padding: 0;
			color: rgba(#fff, 0.9);
		}
	}
</style>